<template>
  <DynamicList
    ref="roleListTable"
    v-bind="logListColumns"
    @load-data="setPage"
    @reset-data="onResetData"
  >
  </DynamicList>
</template>

<script setup lang="tsx">
  import DynamicList from '@/components/dynamicList/index.vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import { RequestEnum } from '@/enums/httpEnum';
  import useRequestList from '@/hooks/useRequestList';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { sysLogApi } from '@/api/system/log';

  defineOptions({
    name: 'logList',
  });
  const roleListTable = ref<any>(null);
  const router = useRouter();
  const { list, page, setPage, loading } = useRequestList({
    apiKey: sysLogApi.sysLogList,
    type: RequestEnum.GET,
  });
  const logListColumns = ref({
    columns: [
      {
        title: 'ID',
        width: 50,
        align: 'center',
        dataIndex: 'id',
      },
      {
        title: '用户名',
        width: 200,
        align: 'center',
        dataIndex: 'userName',
        search: true,
        component: ComponentsTypeEnum.Input,
      },
      {
        title: '操作描述',
        width: 200,
        align: 'center',
        dataIndex: 'description',
      },
      {
        title: 'IP',
        width: 200,
        align: 'center',
        dataIndex: 'ip',
      },
      {
        title: '操作时间',
        width: 200,
        align: 'center',
        dataIndex: 'createTime',
        customRender: ({ text }) => {
          return text ? formatToDateTime(text) : '-';
        },
      },
    ],
    pageParams: page,
    list,
    loading,
  });

  const onResetData = (queryParams) => {
    setPage(queryParams);
  };
</script>

<style></style>
